<script setup lang="ts">
import { h, onMounted, ref } from 'vue'
import type { UploadFileInfo } from 'naive-ui'
import {
  NButton,
  NDataTable,
  // DrawerPlacement,
  NFormItem,
  NSpin,
  NSpace,
  NUpload,
  NUploadDragger,
  NP,
  useMessage,
  NModal,
  NCard,
} from 'naive-ui'
import to from 'await-to-js'
import { useRouter } from 'vue-router'
import { SvgIcon } from '@/components/common'
import { getToken } from '@/store/modules/auth/helper'
import { delKnowledgeDetail, getKnowledgeDetail } from '@/api/knowledge'
import { t } from '@/locales'

const router = useRouter()
const message = useMessage()
const token = getToken()
const headers = { Authorization: `Bearer ${token}` }

// 状态管理
const kid = ref<string>('')
const spinShow = ref(false)
const showModal = ref(false)
const tableData = ref([])
const pagination = ref({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 30, 40],
  onChange: (page: number) => {
    pagination.value.page = page
  },
  onUpdatePageSize: (pageSize: number) => {
    pagination.value.pageSize = pageSize
    pagination.value.page = 1
  },
})

// 生命周期钩子
onMounted(() => {
  kid.value = router.currentRoute.value.query.kid as string
  fetchData()
})

// 表格列定义
const createColumns = () => {
  return [
    ...(false
      ? [
          {
            title: 'ID',
            key: 'id',
            width: 80,
            ellipsis: true,
          },
			  ]
      : []),
    {
      title: t('annex.docId'),
      key: 'docId',
    },
    {
      title: t('annex.docName'),
      key: 'docName',
    },
    {
      title: t('annex.docType'),
      key: 'docType',
    },
    {
      title: t('annex.action'),
      key: 'actions',
      render: (row: any) => {
        return [
          h(
            NButton,
            {
              onClick: () => delKnowledgeForm(row.docId),
              style: 'margin-left: 8px; color: #FF4500;',
            },
            { default: () => t('annex.deleteAttachment') },
          ),

          h(
            NButton,
            {
              onClick: () => handleActionButtonClick(row, 'action4'),
              style: 'margin-left: 8px; color: #32CD32;',
            },
            { default: () => t('annex.knowledgeFragment') },
          ),
        ]
      },
    },
  ]
}
const columns = ref(createColumns())

// 数据获取
const fetchData = async () => {
  try {
    const [err, result] = await to(getKnowledgeDetail(kid.value))
    if (err)
      message.error(err.message)
		 else
      tableData.value = result.rows
  }
  catch (error) {
    console.error('Error fetching data:', error)
  }
}

// 上传相关函数
function handleFinish({
  file,
  event,
}: {
  file: UploadFileInfo
  event?: ProgressEvent
}) {
  const xhr = event?.currentTarget as XMLHttpRequest
  if (xhr) {
    try {
      const responseData = JSON.parse(xhr.responseText)
      if (responseData.code == 500)
        message.error(responseData.msg)
			 else
        message.success(t('annex.fileUploadSuccess'))
    }
    catch (error) {
      console.error('解析响应数据失败:', error)
    }
  }
  showModal.value = false
  spinShow.value = false
  fetchData()
}

function handleBeforeUpload() {
  spinShow.value = true
}

// 操作函数
function handleActionButtonClick(row: any, action1: string): void {
  router.push({ path: '/fragment/t', query: { docId: row.docId } })
}

function activate() {
  showModal.value = true
}

// 删除附件
async function delKnowledgeForm(docId: string) {
  const req = {
    kid: kid.value,
    docId,
  }

  const [err] = await to(delKnowledgeDetail(req))

  if (err)
    message.error(t('annex.deletionFailed'))
	 else
    message.success(t('annex.attachmentDeletedSuccess'))

  await fetchData()
}

// 返回上一页
function goBack() {
  router.go(-1)
}
</script>

<template>
  <NCard class="annex-container" :bordered="false">
    <div class="annex-header">
      <NButton class="back-button" @click="goBack">
        <SvgIcon icon="mage:arrow-left" class="back-icon" />
        返回
      </NButton>
      <NButton
        type="primary"
        :bordered="false"
        class="upload-button"
        @click="activate"
      >
        {{ $t("annex.uploadAttachment") }}
      </NButton>
    </div>

    <NDataTable
      :columns="columns"
      :data="tableData"
      :pagination="pagination"
      :bordered="false"
      class="annex-table"
    />
  </NCard>

  <NModal
    v-model:show="showModal"
    :title="$t('annex.uploadAttachment')"
    :auto-focus="false"
    preset="dialog"
  >
    <NSpace vertical>
      <NFormItem>
        <NSpin :show="spinShow">
          <NUpload
            class="annex-upload"
            directory-dnd
            action="/api/knowledge/attach/upload"
            name="file"
            :data="{ kid }"
            :on-before-upload="handleBeforeUpload"
            :headers="headers"
            :max="1"
            @finish="handleFinish"
          >
            <NUploadDragger class="upload-dragger">
              <div class="upload-content">
                <div class="upload-icon-container">
                  <SvgIcon icon="mage:upload" class="upload-icon" />
                </div>

                <div class="upload-info">
                  <NP class="upload-title">
                    {{ $t("annex.pleaseUploadFile") }}
                  </NP>

                  <NP class="upload-desc">
                    {{ $t("annex.supportedFormats") }}
                  </NP>
                </div>

                <div class="upload-warnings">
                  <div class="warning-title">
                    {{ $t("annex.uploadNotes") }}
                  </div>
                  <NP class="upload-warning">
                    <span class="warning-dot">•</span>
                    {{ $t("annex.friendlyReminder") }}
                  </NP>
                  <NP class="upload-warning">
                    <span class="warning-dot">•</span>
                    {{ $t("annex.largeFileWarning") }}
                  </NP>
                  <NP class="upload-warning">
                    <span class="warning-dot">•</span>
                    {{ $t("annex.utf8Warning") }}
                  </NP>
                  <NP class="upload-warning">
                    <span class="warning-dot">•</span>
                    {{ $t("annex.uploadCharacterLimit") }}
                  </NP>
                </div>
              </div>
            </NUploadDragger>
          </NUpload>
        </NSpin>
      </NFormItem>
    </NSpace>
  </NModal>
</template>

<style scoped>
.annex-container {
	height: 100%;
	border-radius: 20px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.annex-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	padding: 8px 0;
}

.back-button {
	display: flex;
	align-items: center;
	font-weight: 500;
	padding: 8px 16px;
	border-radius: 6px;
}

.back-icon {
	margin-right: 4px;
	font-size: 1rem;
}

.upload-button {
	font-weight: 500;
	padding: 8px 16px;
	border-radius: 6px;
}

.annex-table {
	border-radius: 8px;
	overflow: hidden;
}

.annex-modal {
	width: 100%;
	max-width: 520px;
}

.upload-dragger {
	padding: 32px;
	border: 2px dashed #e0e0e0;
	border-radius: 12px;
	text-align: center;
	transition: all 0.3s;
}

.upload-dragger:hover {
	border-color: #1890ff;
}

.upload-content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.upload-icon-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	margin-bottom: 16px;
}

.upload-icon {
	font-size: 2.5rem;
	color: #1890ff;
}

.upload-info {
	margin-bottom: 24px;
}

.upload-title {
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 8px;
}

.upload-desc {
	font-size: 14px;
	margin-bottom: 8px;
}

.upload-warnings {
	width: 100%;
	border-radius: 8px;
	padding: 16px;
	text-align: left;
	border-left: 4px solid #faad14;
}

.warning-title {
	font-weight: 500;
	color: #d46b08;
	margin-bottom: 8px;
	font-size: 15px;
}

.upload-warning {
	margin: 6px 0;
	color: #873800;
	font-size: 13px;
	display: flex;
	align-items: flex-start;
}

.warning-dot {
	margin-right: 6px;
	color: #fa8c16;
}
</style>
